https://codepen.io/hereiscasio/pen/ExYGOPr?editors=1010

Used UI Component ( #3 )

#1 Bars > App bars, #2 Application, #3 Hover

UI 圖來源見此

Discussion

從今天開始，仿製對象都是 Google 的產品頁面＊，其複雜度大多為中上等級，實作細節過多，一般只會介紹較特別的排版方式，若有需要，會排一些涉及動態的版面，但會改在隔天予以實作

Vuetify 之所以強大，是因為它們不只單單提供 UI 組件，有些常見的特效還會實作並規格化（ 請至 Bars > App bars 的頁面看完所有 Examples，你就會懂我在說什麼 ）。本日實作的對象雖然只是靜態頁面，不過請仔細觀察 Toolbar 在滾動滾輪後的特效。此效果純粹是被 Vuetify 規格化的功能。

值得一提的是 app 和 v-content 的使用方式；這是 Vuetify 中超級重要、超級好用、方便的功能，請觀察以下的 psuedo code：因為 v-app-bar 是採絕對定位，這意味它會蓋掉離它最近的 sibling 元件一部分，此例中，sibling 元件即 v-content，但因為我們在 v-app-bar 上使用了 app，這會請 Vuetify 幫我們把這兩個元件調整成我們心中想要的組合方式，也就是 v-content 並不會被 v-app-bar 遮到！

<v-card>
    <v-app-bar app absolute ...>
    <v-content>
    ...
    </v-content>
</v-card>

＊有些頁面非產品，只是用於介紹它們自家產品的網頁